<template>
	<view class="index">
		<!-- 头部导航栏	 -->
		<view class="top">
			<view class="left">
				<uv-picker ref="picker" :columns="columns" @confirm="confirm" @change="change"></uv-picker>
				<image class="image1" @click="openPicker" src="/static/image/位置.png" mode=""></image>
			</view>
			<view class="conter">{{all}}</view>
			<view class="right">
				<uv-input placeholder="输入关键字模糊查询" prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #909399"></uv-input>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="banner">
			<uv-swiper :list="list" height="300rpx"></uv-swiper>
		</view>
		<!-- 新人下单 -->
		<view class="newcomer">
			<view class="newcomer-top">
				<view class="left">新人下单有礼</view>
				<view class="right">返现奖励</view>
			</view>
			<view class="newcomer-bottom">
				<view class="one" v-for="item in 3">
					<view>￥<view class="color">5</view>
					</view>
					<view class="opened"><uv-icon name="lock-opened-fill"></uv-icon>
						<view>第一单</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 公告 -->
		<view class="announcement">
			<uv-notice-bar color="#008c8c" bgColor="#e5f3f3" :text="text"></uv-notice-bar>
		</view>
		<!-- 宫格 -->
		<view class="gird">
			<uv-grid :col="4" :border="false">
				<uv-grid-item v-for="(item,index) in baseList" :key="index" @click="goTo(item.url)">
					<uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="40"></uv-icon>
					<text class="grid-text">{{item.title}}</text>
				</uv-grid-item>
			</uv-grid>
		</view>
		<!-- 单图 -->
		<view class="singlegraph">
			<image src="../../static/image/汪星球.jpg" mode=""></image>
		</view>
		<!-- 师傅推荐 -->
		<view class="recommend">
			<view class="top1">
				<view class="color2">师傅推荐</view>
				<view class="color1" @click="golistmasters">更多<uv-icon name="arrow-right" color="#dedede" size="18"></uv-icon>
				</view>
			</view>
			<view class="recommend-bottom1">
				<view class="bottom-top1" v-for="item in 3">
					<view class="photo">
						<image class="image2" src="/static/image/宠物医生.png" mode=""></image>
						<view class="shadow">上次服务</view>
					</view>
					<view class="text1">这是师傅的名称</view>
					<view class="text2">已服务:234次</view>
				</view>
			</view>
		</view>
		<!-- 宫格 -->
		<view class="gird">
			<uv-grid :col="4" :border="false">
				<uv-grid-item v-for="(item,index) in baseList" :key="index">
					<uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="40"></uv-icon>
					<text class="grid-text">{{item.title}}</text>
				</uv-grid-item>
			</uv-grid>
		</view>
		<!-- 箭头 -->
		<view class="arrow" @click="open">
			<uv-icon name="arrow-up-fill" color="#9aa2b5" size="22px"></uv-icon>
		</view>		
		<!-- 客服 -->
		<view class="customer">
			<view class="customer1">
				<image src="../../static/image/客服.png" mode=""></image>
			</view>
			<view class="customer2">客服</view>
		</view>
		<!-- 弹出层 -->
		<view class="pup">
			<uv-popup ref="popup" round="20" custom-style="height: 550rpx;" closeable="ture" closeIconPos="top-right"
				mode="bottom" @change="change1">
				<view class="more">更多服务</view>
				<view class="gird">
					<view class="gird1" @click="goservices(item.id)"  v-for="(item,index) in getdata" :key="index">
						<image :src="item.image" mode="aspectFit" ></image>
						<text class="grid-text">{{item.name}}</text>
					</view>
				
				</view>

			</uv-popup>
		</view>
	</view>
</template>

<script>
	import {
		myRequest
	} from '@/request/request.js'
	export default {
		data() {
			return {
				// 获取查询数据
				getdata: '',
				// 宫格
				baseList: [{
					name: '/static/image/可爱小鸭子.png',
					title: '上门遛狗',
					url: '1'
				}, {
					name: '/static/image/可爱小鸭子.png',
					title: '上门喂猫',
					url: '2'
				}, {
					name: '/static/image/可爱小鸭子.png',
					title: '上门洗澡',
					url: '3'
				}, {
					name: '/static/image/可爱小鸭子.png',
					title: '上门美容',
					url: '4'
				}, {
					name: '/static/image/可爱小鸭子.png',
					title: '上门剪毛',
					url: '5'
				}, {
					name: '/static/image/可爱小鸭子.png',
					title: '上门训练',
					url: '6'
				}, {
					name: '/static/image/可爱小鸭子.png',
					title: '上门医生',
					url: '/pages/listmasters/listmasters'
				}, {
					name: '/static/image/可爱小鸭子.png',
					title: '更多服务',
					url: '/pages/services/services'
				}],
				loading: false,
				// 公告
				text: '这里是公告内容这里是公告内容',
				// 轮播图
				list: [
					'',
					'',
					'https://tse3-mm.cn.bing.net/th/id/OIP-C.Rk0shuvnCBQigO94QGlaogHaE8?w=282&h=188&c=7&r=0&o=5&dpr=1.6&pid=1.7',
				],
				all: '',
				list1: '济南',
				columns: [
					['济南', '美国'],
					['深圳', '厦门', '上海', '拉萨']
				],
				columnData: [
					['深圳', '厦门', '上海', '拉萨'],
					['得州', '华盛顿', '纽约', '阿拉斯加']
				]
			}
		},
		// 生命周期
		created() {
			this.moreservices()
		},
		methods: {
			// 获取更多服务
			moreservices() {
				const that = this
				console.log(that);
				myRequest('More/index?server=1', function(err, data) {
					if (err) {

					} else {

						that.getdata = data.data
						console.log(that.getdata);

					}
				}, 'GET', {


				})
			},
			// 去服务页
			goservices(id) {
				uni.navigateTo({
					url: `/pages/services/services?id=${JSON.stringify(id)}`
				})
			},
			//跳转师傅列表
			golistmasters() {
				uni.navigateTo({
					url: '/pages/listmasters/listmasters'
				})
			},
			// 页面跳转
			goTo(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				})
			},
			// 弹出层
			open() {
				this.$refs.popup.open();
			},
			change1(e) {
				console.log('弹窗状态改变：', e);
			},
			// 位置
			openPicker() {
				this.$refs.picker.open();
			},
			confirm(e) {
				console.log('confirm', e);
				this.all = e.value[0]
			},
			change(e) {
				console.log('change');
				const {
					columnIndex,
					index
				} = e;
				if (columnIndex === 0) {
					this.loading = true;
					setTimeout(() => {
						this.$refs.picker.setColumnValues(1, this.columnData[index]);
						this.loading = false;
					}, 2000)
				}
			}
		}
	}
</script>

<style lang="scss">
	@import url("/pages/index/index.css");
</style>